import { ComponentClass } from 'react'
import { connect } from '@tarojs/redux'

import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'

import HomeContent from '../../../containers/HomeContent'
import { queryList } from '../../../actions/goods'

import './index.scss'

type PageStateProps = {
  goods: object | {},
}

type PageDispatchProps = {
  fetchList: () => void
}

type PageOwnProps = {}

type PageState = {}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface MyGoods {
  props: IProps
}

@connect(({ goods }) => ({
  goods
}), (dispatch) => ({
  fetchList(params) {
    dispatch(queryList(params))
  }
}))
class MyGoods extends Taro.Component {
  config: Taro.Config = {
    navigationBarTitleText: '中奖纪录'
  }

  constructor() {
    super(...arguments)
    this.state = {
      status: 0,
    }
  }

  componentWillMount() {
    const params = this.$router.params ? this.$router.params : {}
    const userInfo = Taro.getStorageSync('userInfo')

    this.setState(state => ({
      ...state,
      ...params
    }), () => {
      // 初始化数据
      this.props.fetchList({userId: userInfo.userId, status: 2})      
    })
  }

  handleClick = value => {
    this.setState(state => ({
      ...state,
      status: value
    }), () => {
      this.props.fetchList({...this.state})
    })
  }

  handleToPage = (row, msg) => {
    msg.stopPropagation()

    Taro.navigateTo({
      url: '/pages/profile/index?id=${row.id}'
    })
  }

  render() {
    return (
      <View className='bg'>
        {
          (this.props.goods.data.data && this.props.goods.data.data.length > 0)
          ?
          this.props.goods.data.data.map((row) => <HomeContent queryRow={row} key={row.id} onClick={this.handleToPage} />)
          :
          <View className="empty-des">暂无中奖记录</View>        
        }
      </View>
    )
  }
}

export default MyGoods as ComponentClass<PageOwnProps, PageState>